<template>
  <div>
    <q-table
      id="my-xls"
      bordered
      flat
      separator="cell"
      :columns="tblColumns"
      row-key="name"
      :rows="tblRows"
      :pagination="tblPagination"
      :rows-per-page-options="[10,20]"
    >
      <template v-slot:body="props">
        <q-tr :props="props">
        </q-tr>
      </template>
    </q-table>
  </div>
</template>

<script lang="ts">

export interface AmyFunc {
  (): void
}

export  interface AmyHeader {
  name: string,
  label: string,
  field: string | AmyFunc,
  required?: boolean,
  align: string,
  sortable?: true
}

export interface AmyPagination {
  pageNum: number,
  pageSize: number,
  total: number
}



import { defineComponent, ref, PropType, toRefs } from 'vue'
export default defineComponent({
  name: 'AmyEditGrid.vue',
  props: {
    tblColumns: {
      type: Array as PropType<AmyHeader[]>,
      required: true
    },

    tblRows: {
      type: Array,
      required: true
    },

    tblPagination: {
      type: Object as PropType<AmyPagination>,
      required: true
    }
  },
  setup (props, context) {
    //数据解构
    const {
      tblColumns,
      tblRows,
      tblPagination
    } = toRefs(props);

    return {
      tblColumns,
      tblRows,
      tblPagination
    };
  }
});
</script>

<style lang="scss" scoped>

</style>
